<template>
  <div class="all-article">
    <ul v-infinite-scroll="load">
      <li v-for="item in pageArticleData" :key="item._id">
        <div class="article-pic">
          <router-link :to="`/article/${item._id}`">
            <img :src="baseUrl + item.coverUrl" alt="" />
          </router-link>
        </div>
        <div class="article-info">
          <h2>
            <a href="javascript:;">{{ item.title }}</a>
          </h2>
          <div class="info-desc">
            相信许多老站长对织梦系统都很熟了，不过如果你正在使用Dedecms织梦内容管理系统软件就需要注意了，从9月26日起尚未购买DedeCMS商业使用授权的话，那就可能面临遭官方索赔的风险。因为在本月26日，DedeCMS...
          </div>
          <div class="info-record">
            <span class="info-author">
              <a href="javascript:;">
                <i> <img :src="baseUrl + item.coverUrl" alt="" /></i>
                <span style="margin-left: 5px">甘先森</span>
              </a>
            </span>
            <span class="info-time"
              ><i class="iconfont icon-riliriqi" style="margin-right: 5px"></i
              >{{ formatDate(item.date) }}</span
            >
            <span class="info-comment fr"
              ><i class="iconfont icon-huifu" style="margin-right: 5px"></i
              >评论({{ item.readingNum }})条</span
            >
            <span class="info-viewnums fr" style="margin-right: 20px"
              ><i class="el-icon-eleme" style="margin-right: 5px"></i>阅读{{
                item.readingNum
              }}次</span
            >
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageArticleData: [], //文章数据列表
      allArticleData: [], //所有文章数据
      skip: 5, //初始5
    };
  },
  methods: {
    formatDate(date) {
      let d = new Date(date),
        YY = d.getFullYear(),
        MM = d.getMonth() + 1,
        DD = d.getDate();

      return `${YY}-${MM}-${DD}`;
    },
    // 获取文章列表
    async getArticleList() {
      let { data } = await this.$axios({
        method: "GET",
        url: "/getData/getArticleList",
      });
      if (data.code) return this.$message.error(data.message);
      this.allArticleData = data.data; //所有文章数据给allArticleData
      this.pageArticleData.push(
        ...this.allArticleData.slice(0, this.skip) //截取0-5下标位置的数组成员（返回值也是数组）
      );
    },

    load() {
      if (!this.allArticleData.length) return; //不存在文章数据时直接返回
      this.pageArticleData.push(
        ...this.allArticleData.slice(this.skip, this.skip + 3) //截取5-10下标位置的数组成员（返回值也是数组）
      );
      this.skip += 3;
    },
  },
  created() {
    this.getArticleList();
  },
};
</script>
<style lang="less" scoped>
.all-article li {
  padding: 15px 20px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  position: relative;
  overflow: hidden;
  background: #fff;
  // border-radius: 8px;

  .article-pic {
    width: 30%;
    min-width: 200px;
    float: left;
    margin-right: 20px;
    display: block;
    height: 165px;
    overflow: hidden;
    a {
      img {
        transition: all 0.4s;
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .article-info {
    margin-top: -4px;
    float: left;
    width: 66%;
    height: 165px;
    overflow: hidden;
    position: relative;
    h2 {
      max-height: 66px;
      text-align: left;
      padding-bottom: 10px;
      font-size: 18px;
      font-weight: bold;
      line-height: 1.7;
      font-style: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      border-bottom: 1px solid #f0f0f0;
      position: relative;
      a {
        color: #333;
      }
    }
    .info-desc {
      font-size: 14px;
      line-height: 24px;
      margin-top: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .info-record {
      float: left;
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      position: absolute;
      bottom: 0px;
      > span > i {
        font-size: 12px;
      }
      span.info-author {
        margin-right: 20px;

        i {
          width: 30px;
          height: 30px;
          float: left;
          position: relative;
          top: -2px;
          img {
            display: block;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            padding: 2px;
          }
        }
      }
      .fr {
        float: right;
      }
    }
  }
}
.all-article li:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.all-article li:hover .article-pic img {
  transform: scale(1.2) rotate(-6deg);
}
.all-article li:nth-child(n + 6) {
  animation: fadeInDown 1s;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
</style>